<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米家电</title>

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        .layout-arcoss {
            width: 100%;
            /* background: #dedede ; */
        }

        .layout-center {
            /* background: #ffff00; */
            width: 1226px;
            height: 686px;
            margin: auto;
        }

        .layout-center .nav {
            height: 60px;
            width: 100%;
        }

        .layout-center .nav h1 {
            width: 50%;
            margin: 0;
            line-height: 60px;
            float: left;
        }

        .layout-center .nav .nav1 {
            float: right;
            width: 50%;
        }

        .layout-center .nav .nav1 p {
            float: right;
            margin-right: 15px;
            font-size: 18px;
        }
        .layout-center .nav .nav1 .before{
            border-bottom: 2px solid red; 
         color: red;
        }
        .before:hover {
            /* border-bottom: 2px solid transparent; */
            /* color: red; */
            margin-bottom: 10px;
            cursor: pointer;
        }

        .after:hover {
            /* border-bottom: 2px solid transparent; */
            /* color: red; */
            margin-bottom: 10px;
            cursor: pointer;
        }

        .layout-center .body2 {
            display: none;
        }

        .layout-center .item {
            width: 234px;
            height: 300px;
            float: left;
            margin-right: 14px;
            margin-top: 14px;

        }

        .layout-center .body1 .bg_c {
            background: #dedede;
        }

        .layout-center .body2 .bg_c {
            background: gray;
        }

        .layout-center .state:hover {
            box-shadow: 0 5px 10px -5px purple;
        }

        .layout-center .last {
            margin-right: 0;
        }
    </style>

</head>

<body>

    <div class="layout-arcoss">
        <div class="layout-center">
            <div class="nav">
                <h1>家电</h1>
                <div class="nav1">
                    <p class="after">电视影音</p>
                    <p class="before">热门</p>
                </div>
            </div>
            <div class="body1">
                <div class="item state bg_c"></div>
                <div class="item state bg_c"></div>
                <div class="item state bg_c"></div>
                <div class="item state bg_c"></div>
                <div class="item state bg_c last"></div>
                <div class="item state bg_c"></div>
                <div class="item state bg_c"></div>
                <div class="item state bg_c"></div>
                <div class="item state bg_c"></div>
                <div class="item last" style="background: transparent;">
                    <div class="state" style="height: 143px ; margin-bottom: 14px ; background: #ff0;"></div>
                    <div class="state" style="height: 143px ; background: #ff0;"></div>
                </div>
            </div>
            <div class="body2">
                <div class="item state bg_c"></div>
                <div class="item state bg_c"></div>
                <div class="item state bg_c"></div>
                <div class="item state bg_c"></div>
                <div class="item state bg_c last"></div>
                <div class="item state bg_c"></div>
                <div class="item state bg_c"></div>
                <div class="item state bg_c"></div>
                <div class="item state bg_c"></div>
                <div class="item last" style="background: transparent;">
                    <div class="state" style="height: 143px ; margin-bottom: 14px ; background:red;"></div>
                    <div class="state" style="height: 143px ; background:red;"></div>
                </div>

            </div>
        </div>
    </div>
    <script type="text/javascript">
        (function () {


            let after = document.querySelector('[class=after]');
            let before = document.querySelector('[class=before]');
            let hidden = false;
            let af = function () {
                let body1 = document.querySelector('.body1');
                let body2 = document.querySelector('.body2');
                if (!hidden) {
                    body1.style.display = 'none';
                    body2.style.display = 'block';
                    after.style.borderBottom='2px solid red'
                    after.style.color='red'
                    before.style.borderBottom='2px solid transparent'
                    before.style.color='black'
                    hidden = true;
                }
            }
            let bf = function () {
                let body1 = document.querySelector('.body1');
                let body2 = document.querySelector('.body2');
                if (hidden) {
                    body1.style.display = 'block';
                    body2.style.display = 'none';
                    after.style.borderBottom='2px solid transparent'
                    after.style.color='black'
                    before.style.borderBottom='2px solid red'
                    before.style.color='red'
                    hidden = false;
                }
            }
            before.addEventListener('mouseenter', bf, false);
            after.addEventListener('mouseenter', af, false);

        })();
    </script>
</body>

</html>